<template>
	<scroll-view class="container" scroll-y="true" :show-scrollbar="false" enhanced="true">
		
		<view class="content common_card">
			<view class="image-container" @click.stop="seeDetail">
				<image class="device-img" :src="$imageUrl(detail.proHeroImage.mainImage)" mode="aspectFit"></image>
			</view>
			<view class="common-bold-title device-title">
				<text>{{detail.appDevRespVo.devName}}</text>
			</view>

			<view class="info-section">
				<view class="info-item">
					<text class="label">质保时间</text>
					<text class="value">{{detail.appDevRespVo.warrantyPeriod}}</text>
				</view>
				<view class="info-item">
					<text class="label">生产日期</text>
					<text class="value">{{detail.appDevRespVo.onTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">SN序列号</text>
					<text class="value">{{detail.appDevRespVo.serialNumber}}</text>
				</view>
				<view class="info-item">
					<text class="label">设备规格</text>
					<text class="value">{{detail.appDevRespVo.devSpecification}}</text>
				</view>
				<view class="info-item">
					<text class="label">运行状态</text>
					<text class="value" :class="detail.appDevRespVo.onStatus == 1 ? 'normal' : 'error'">{{textRunStatus}}</text>
				</view>
			</view>
		</view>
		
		<view @click="onTap">
			<cs-project-info :project-info="detail.appItemRespVo"></cs-project-info>
		</view>
		<view style="height: 48rpx; background-color: transparent;"></view>
	</scroll-view>
</template>

<script>
export default {
	data(){
		return {
			detail:{
				proHeroImage:{
					mainImage:'',
				},
				appDevRespVo:{
					devName:'',
					warrantyDate:'',
					onTime:'',
					serialNumber:'',
					devType:'',
					onStatus:''
				},
				appItemRespVo:{
					
				}
			},
		}
	},
	computed:{
		textRunStatus(){
			var result = ''
			if(this.detail.appDevRespVo.onStatus == 1) {
				result = '正常运行中'
			} else {
				result = '离线'
			}
			return result;
		}
	},
	onLoad(options) {
		console.log('scanpage = ', options);

		let devId = options.devId;			
		let self = this;
		self.$progressHud.showLoading();
		self.$NetApi.getMethod('/loyu-api/app/item/index', {
			devId:devId
		}).then(ok => {
			self.$progressHud.hideLoading();
			self.detail = ok.data;
		}, fail => {
			self.$progressHud.hideLoading();
			self.$progressHud.showToast(fail.errMsg || '网络错误');
		})
	},
	methods: {
		onTap(e){
			let self = this;
			
			// #ifdef MP-WEIXIN
			this.$progressHud.showLoading();
			this.$weixinAuth.isLogined().then(ok=>{
				self.$progressHud.hideLoading();
				if(!ok) {
					uni.showModal({
						confirmText:'去登录',
						cancelText:'取消',
						content:'请先去登录',
						success: (res) => {
							if(res.confirm) {
								this.$progressHud.showLoading();
								this.$weixinAuth.login().then(ok=>{
									this.$progressHud.hideLoading();
									if(ok.hasUserInfo) {
										//登录ok
										this.$progressHud.showToast('登录成功');
									} else {
										//需要注册
										this.$Router.push('/pages/register/register')
									}
								},fail=>{
									//登录失败
									this.$progressHud.hideLoading();
									this.$progressHud.showToast('登录失败');
								})
							}
						},
					})
				} else {
					let itemId = self.detail.appItemRespVo.itemId || '';
					if(this.$weixinAuth.canControl(itemId) || this.$weixinAuth.canSee(itemId)) {
						self.$Router.push({
							path:'/modules/projects/pages/projectDetail/projectDetail',
							query:{
								itemId:itemId
							}
						})
					} else if(this.$weixinAuth.canDoNothing(itemId)) {
						uni.showModal({
							confirmText:'申请加入',
							cancelText:'取消',
							content:'您无权限，是否申请加入该项目？',
							success: (res) => {
								if(res.confirm) {
									let self = this;
									self.$progressHud.showLoading();
									self.$NetApi.postMethod('/loyu-api/app/item/apply/add',{
										itemId:itemId
									}).then(ok => {
										self.$progressHud.hideLoading();
										self.$progressHud.showToast('申请加入成功');
									}, fail => {
										self.$progressHud.hideLoading();
										self.$progressHud.showToast(fail.errMsg || '网络错误');
									})
								}
							},
						})
					}
					
				}
			})
			// #endif
		},
		seeDetail(){
			this.$Router.push({
				path:'/modules/products/pages/productDetail/productDetail',
				query:{
					itemId:this.detail.proHeroImage.id || ''
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.content {
	margin-top: -16rpx;
	margin-bottom: 32rpx;
}

.common_card{
	border-radius: 24rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
	padding: 32rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 61.74%; 
  overflow: hidden;
}

.device-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.common-bold-title{
	font-size: 36rpx;
	font-weight: 500;
	line-height: 56rpx;
	letter-spacing: normal;
	color: #000000;
	line-height: 56rpx;
}
.device-title{
	margin-top: 32rpx;
	margin-bottom: 8rpx;
}

.info-section {
}
.info-section :last-child{
	border-bottom: 0px solid #E5E7EB;
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 16rpx 0;
	border-bottom: 1rpx solid #E5E7EB;
	margin-top: 16rpx;
}

.label {
	font-size: 28rpx;
	color: #4b5563;
	line-height: 40rpx;
}

.value {
	font-size: 28rpx;
	color: #111827;
	line-height: 40rpx;
}

.normal {
	color: #00c853;
}
.error{
	color:$power-color-error;
}

</style>